<template>
  <div class="charge">
    <!-- form -->
    <el-table :data="tableData" border style="width: 100%" >

      <el-table-column align="center" label="产品图片" width="120">
					<!-- 插槽作用域 -->
					<template v-slot="{ row }">
						<el-avatar align="center" shape="square" style="width:60px; height:20px;" fit="scale-down" :src="row.imageUrl"></el-avatar>
					</template>
				</el-table-column>
      <el-table-column align="center" prop="productName" label="产品名称" width="120"> </el-table-column>
      <el-table-column align="center" prop="description" label="产品描述" width="355"></el-table-column>
      <el-table-column align="center" prop="price" label="价格(元)" width="120"> </el-table-column>
      <el-table-column align="center" prop="inventory" label="库存" width="300"></el-table-column>
      
      <el-table-column align="center" label="操作" width="200">
        <template v-slot="{ row }">
						<el-button type="primary" @click="pre_order(row)" icon="iconfont icon-vip3">充值</el-button>
					</template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import * as api  from "@/api/tarnsaction"
  export default {
     data() {
      return {
        tableData: []
      }
    },
    meta:{
       title: 'vipCharge',
       name:"Vip充值",
       icon:"iconfont icon-chongzhi"
    },
    methods: {
      pre_order(row){
        // 获取这一行的product_id 产品id
        let {product_id}=row

        // this.$confirm 提示
        this.$confirm("您正购买"+row.description+"请确认是否确认购买?","购买提示",{
          confirmButtonText:'确认',
          cancelButtonText:'取消',
          type:"success"
        })
        .then(() => {//点了确定
          // 跳转到预支付页面
            this.$router.push({path:"/preorder",query:{product_id}})
          })
        .catch(() => { //点了取消
					this.$message({
						type: 'error',
						message: '已取购买'
					});
				})

        
      }
    },
     created(){
        api.getVipProduct("20210827165510715")
        .then(res=>{
        // console.log(res)2
        this.tableData=res.data.data
        })
    },

   
    
    
  }
</script>


